<template>
  <div class="video-wrap">
    <video :src="src" :autoplay="autoplay" :loop="loop" controls="controls" width="100%" height="100%"></video>
  </div>
</template>

<script>
export default {
  name: 'index',
  cnName: 'index',
  props: {
    option: Object
  },
  data() {
    return {
      src: '',
      autoplay: '',
      loop: ''
    }
  },
  methods: {
    init() {
      const attribute = this.option.attribute
      this.src = attribute.src
      this.autoplay = attribute.autoplay ? 'attribute' : ''
      this.loop = attribute.loop ? 'loop' : ''
    }
  },
  watch: {
    option: {
      handler() {
        this.init()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
